<template>
	<el-table :data="subPersonstates" style="width: 100%;" @selection-change="handleSelectionChange">
		<el-table-column type = "selection" prop="psId" width="55"></el-table-column>
		<el-table-column prop="psId" label="状态ID" width="180"></el-table-column>
		<el-table-column prop="psContent" label="状态名称" width="180"></el-table-column>
		<el-table-column prop="psFlag" label="状态标签" width="180"></el-table-column>
		<el-table-column >
			<template #default = "scope">
				<el-button @click="getRow(scope.row)"><el-icon><EditPen /></el-icon></el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-row>
		<el-col :span="12" :offset="8">
			<el-pagination style="margin: 0 auto;" @current-change="doPaging"
			background layout="prev,pager,next" 
			:page-size="pageSize" :total="personstates.length"/>
		</el-col>
	</el-row>
	<el-button @click="saveDelete" ><el-icon><Delete /></el-icon></el-button>
	<el-form>
		<el-form-item label="状态名称">
			<el-input v-model="addPersonstate.psContent"></el-input>
		</el-form-item>
	</el-form>
	<el-button @click="saveInsert">添加</el-button>
</template>
<script>
	import {ElMessage} from 'element-plus'
	import qs from 'qs'
	export default {
		data(){
			return{
				pageSize:3,
				employees:[],
				personstates:[],
				subPersonstates:[],
				addEmployee:{eId:0},
				addPersonstate:{psFlag:1},
				updatePersonstate:{},
				psArr:[]
			}
		},
		methods:{
			handleSelectionChange(arr){
				this.psArr = arr;
			},
			personstateList(){
				let that = this
				this.$axios.get("http://localhost:8080/PS/selectPSList").then(function(res){
					console.log(res.data)
					that.personstates = res.data
					that.subPersonstates = that.personstates.slice(0,that.pageSize)
				})
			},
			getRow(row){
				this.updatePersonstate = row
			},
			doPaging(curr){
				let start =(curr-1)*this.pageSize
				let end = curr*this.pageSize
				this.subPersonstates = this.personstates.slice(start,end)
			},
			deleteRow(index){
				this.employees.splice(index,1)
			},
			saveUpdate(){
				//提交新的数据进入后台
				let that = this
				let str = qs.stringify(that.updatePersonstate)
				this.$axios.get("http://localhost:8080/PS/UpdatePS?"+str,{
					params:{
						personstate:str
					}
				}).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"更新成功！",
							type:'success',
						})
						that.personstateList()
					}else{
						ElMessage.error("更新失败！")
					}
				})
			},
			saveInsert(){
				//提交新的数据进入后台
				let that = this
				let str = qs.stringify(that.addPersonstate)
				this.$axios.get("http://localhost:8080/PS/insertPSOne?"+str,{
					params:{
						personstate:str
					}
				}).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"添加成功！",
							type:'success',
						})
						that.personstateList()
					}else{
						ElMessage.error("添加失败！")
					}
				})
			},
			saveDelete(){
				let idlist = []
				for(let i = 0;i<this.psArr.length;i++){
					idlist.push(this.psArr[i].psId)
				}
				let that = this
				this.$axios.get("http://localhost:8080/PS/deletePSByPsId?idlist="+idlist).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"删除成功！",
							type:'success',
						})
						that.personstateList()
					}else{
						ElMessage.error("删除失败！")
					}
				})
			}
		},
		created(){
			let that = this;
			this.$axios.get("http://localhost:8080/E/selectEList").then(function(res){
				that.employees = res.data
			})
			this.$axios.get("http://localhost:8080/PS/selectPSList").then(function(res){
				console.log(res.data)
				that.personstates = res.data
			})
			this.personstateList()
		}
	}
</script>

<style>
</style>